import React, { Fragment } from 'react'
import { CardWrap, ContentWrap } from './Style.js'
import { Card } from 'antd'
import InLineForm from './components/Inlineform'
import LoginFormComponent from './LoginComponents/LoginComponents'
import TimeFormComponent from './TimeLogin/LoginComponents'
function Login(props) {
  return (
    <Fragment>
      <ContentWrap>
        <CardWrap>
          <Card title="表单基础知识点">
            <p>1.登陆表单最新的Antd用的是Hooks来写的</p>
            <p>2.表单的自定义规则可以写在rule里面</p>
            <p>3.onFinish最后完成获取到的总数据</p>
            <p>
              4.通过ref来控制表单。利用节点的.current属性。来resetFields,setFieldsValue重置或者填充
            </p>
            <p>
              5.也可以直接使用 Form.useForm()
              来获取实例,这样可以直接调用来resetFields,setFieldsValue重置或者填充
            </p>
            <p>
              6.自定义校验规则必须写在rules里面用validator
              它里面必须是个异步函数
            </p>
            <p>7.使用定时器倒计时改变里面的文字</p>
          </Card>
        </CardWrap>
        {/* 内联表单 */}
        <CardWrap>
          <Card title="内联表单">
            <InLineForm></InLineForm>
          </Card>
        </CardWrap>
        {/* 登陆表单 */}
        <CardWrap>
          <Card title="登陆表单">
            <LoginFormComponent></LoginFormComponent>
          </Card>
        </CardWrap>
        {/* 倒计时表单 */}
        <CardWrap>
          <Card title="倒计时表单 点击登陆后倒计时">
            <TimeFormComponent></TimeFormComponent>
          </Card>
        </CardWrap>
      </ContentWrap>
    </Fragment>
  )
}

export default Login
